<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="good in list">
                <img v-bind:src="good.img" >
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>

<style>
    .goodList li{
        width: 200px;
        height: 200px;
        list-style: none;
        float: left;
        font-size: 9px;
        color: red;
        margin-bottom: 30px;
    }
     .goodList img{
        width: 180px;
        height: 180px;
    }
</style>

<script>
export default {
    name:"show",
    data(){
        var _this= this;
        var url = "";
        if(_this.goodId == 1){
            url = "json/dn.json";
        }else if(_this.goodId == 2) {
            url = "json/sj.json";
        }else {
            url = "json/dn.json"; 
        }
        this.$axios.get(url).then(function(res){
            _this.list = res.data;
        })
        return{
            list:[]
        }
    },
    props:{
        goodId:Number
    },
    watch:{
        goodId(){
            var _this = this;
            var url = "";
            if(_this.goodId == 1){
                url = "json/dn.json";
            }else if(_this.goodId == 2) {
                url = "json/sj.json";
            }
            this.$axios.get(url).then(function(res){
            _this.list = res.data;
            return{
                list:[]
            }
        })
        }
    }
}
</script>
